<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>代码在线编辑</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    @media screen and (min-width: 960px) {
        .editorSet {
            width: 100%;
        }
        .editorSet .editor {
            height: 450px;
            width: 48%;
            overflow-y: hidden;
            background-color: rgb(44, 52, 55);
            float: left;
        }
    }

    @media screen and (max-width: 959px) {
        .editorSet {
            width: 100%;
        }
        .editorSet .editor {
            height: 450px;
            width: 100%;
            overflow-y: hidden;
            background-color: rgb(44, 52, 55);
        }
    }

    .NightTheme .editorSet .editor {
        -webkit-box-shadow: inset 0 1px 3px rgb(22, 26, 27);
        -moz-box-shadow: inset 0 1px 3px rgb(22, 26, 27);
        box-shadow: inset 0 1px 3px rgb(22, 26, 27);
    }

    .label {
        background: rgba(230, 230, 230, 0.5);
        height: 20px;
        padding: 0 6px;
        line-height: 20px;
        z-index: 999;
        text-align: center;
        font-size: 12px;
        color: #BBB;
        border-radius: 3px;
    }

    .editor iframe {
        border: 0 !important;
        min-height: 100px;
        min-width: 100px;
        height: 100%;
        width: 100%;
    }

    .submit-btn {
        color: #fff;
        background-color: #67c23a;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid #67c23a;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        margin-bottom: 2px;
    }

    .edit-area {
        height: 85%;
    }
    </style>
</head>

<body>
    <div class="NightTheme">
        <a class="submit-btn" id="submit">提交运行</a>
        <div id="main_container">
            <div id="core" class="core core_margin1">
                <div class="editorSet clearfix">
                    <div>
                        <div class="editor">
                            <span class="label">html</span>
                            <pre id="editor1" class="edit-area"></pre>
                        </div>
                        <div class="editor">
                            <span class="label">css</span>
                            <pre id="editor2" class="edit-area"></pre>
                        </div>
                        <div class="editor">
                            <span class="label">javascript</span>
                            <pre id="editor3" class="edit-area"></pre>
                        </div>
                        <div class="editor">
                            <iframe style="top: 0;background: #fff;" class="edit-area" id="preview" frameborder="0" srcdoc="<!DOCTYPE html><html><head><meta charset=&quot;utf-8&quot; /><title>代码测试</title><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/><meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot; /><meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black&quot; /><meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot; /><meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;chrome=1,IE=edge&quot;/><meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0&quot;/><style type=&quot;text/css&quot;></style><script type=&quot;text/javascript&quot; src=&quot;https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js&quot;></script><script type=&quot;text/javascript&quot;>new window.VConsole();</script></head><body><script type=&quot;text/javascript&quot;></script></body></html>"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./src-noconflict/ace.js"></script>
    <script type="text/javascript" src="./src-noconflict/ext-language_tools.js"></script>
    <script type="text/javascript">
    (function() {
        var editor1 = ace.edit("editor1", {
            theme: "ace/theme/monokai",
            mode: "ace/mode/html",
            wrap: true,
            autoScrollEditorIntoView: true,
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        var editor2 = ace.edit("editor2", {
            theme: "ace/theme/monokai",
            mode: "ace/mode/css",
            autoScrollEditorIntoView: true,
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        var editor3 = ace.edit("editor3", {
            theme: "ace/theme/monokai",
            mode: "ace/mode/javascript",
            autoScrollEditorIntoView: true,
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        var submit = document.querySelector('#submit');
        submit.addEventListener('click', function() {
            var htmlValue = editor1.getValue();
            var cssValue = editor2.getValue();
            var jsValue = editor3.getValue();
            var htmlStr = '<!DOCTYPE html>' +
                '<html>' +
                '<head>' +
                '<meta charset="utf-8" />' +
                '<title>代码测试</title>' +
                '<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>' +
                '<meta name="format-detection" content="telephone=no" />' +
                '<meta name="apple-mobile-web-app-status-bar-style" content="black" />' +
                '<meta name="apple-mobile-web-app-capable" content="yes" />' +
                '<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>' +
                '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>' +
                '<style type="text/css">' +
                cssValue +
                '</style>' +
                '<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js">' +
                '</' +
                'script>' +
                '<script type="text/javascript">' +
                'new window.VConsole();' +
                '</' +
                'script>' +
                '</head>' +
                '<body>' +
                htmlValue +
                '<script type="text/javascript">' +
                jsValue +
                '</' +
                'script>' +
                '</body>' +
                '</html>';
            document.getElementById('preview').srcdoc = htmlStr;
        })
    })()
    </script>
</body>

</html>